<template>
  <div class="case-apply-container">
    <el-card class="form-card">
      <template #header>
        <div class="header">
          <h2>案件申请</h2>
          <el-steps :active="activeStep" finish-status="success" simple>
            <el-step title="基本信息" />
            <el-step title="案件详情" />
            <el-step title="上传附件" />
            <el-step title="提交申请" />
          </el-steps>
        </div>
      </template>

      <!-- 步骤1：基本信息 -->
      <div v-if="activeStep === 1">
        <el-form ref="baseForm" :model="formData" :rules="baseRules" label-width="120px">
          <el-form-item label="案件类型" prop="caseType">
            <el-select v-model="formData.caseType" placeholder="请选择案件类型">
              <el-option
                  v-for="item in caseTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="申请人" prop="applicant">
            <el-input v-model="formData.applicant" placeholder="请输入申请人姓名" />
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="联系地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入联系地址" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤2：案件详情 -->
      <div v-if="activeStep === 2">
        <el-form ref="detailForm" :model="formData" :rules="detailRules" label-width="120px">
          <el-form-item label="案件内容" prop="content">
            <el-input
                v-model="formData.description"
                type="textarea"
                :rows="10"
                placeholder="请详细描述案件信息..."
            />
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤3：上传附件 -->
      <div v-if="activeStep === 3">
        <el-form ref="attachmentForm" label-width="120px">
          <el-form-item label="相关附件">
            <el-upload
                action="/api/upload"
                multiple
                :file-list="fileList"
                :on-success="handleUploadSuccess"
                :on-remove="handleRemove"
            >
              <el-button type="primary">点击上传</el-button>
              <template #tip>
                <div class="el-upload__tip">支持扩展名：.doc .docx .pdf .jpg .png，单个文件不超过10MB</div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤4：提交申请 -->
      <div v-if="activeStep === 4">
        <el-result
            icon="success"
            title="确认提交"
            sub-title="请确认以下信息无误后提交申请"
        >
          <template #extra>
            <el-descriptions border :column="1">
              <el-descriptions-item label="案件名称">{{ formData.caseName }}</el-descriptions-item>
              <el-descriptions-item label="案件类型">{{ caseTypeMap[formData.caseType] }}</el-descriptions-item>
              <el-descriptions-item label="申请人">{{ formData.applicant }}</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ formData.phone }}</el-descriptions-item>
              <el-descriptions-item label="联系地址">{{ formData.address }}</el-descriptions-item>
              <el-descriptions-item label="案件描述">{{ formData.description }}</el-descriptions-item>
              <el-descriptions-item label="附件数量">{{ formData.attachments?.length || 0 }}个</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-result>
      </div>

      <div class="action-bar">
        <el-button v-if="activeStep > 1" @click="prevStep">上一步</el-button>
        <el-button v-if="activeStep < 4" type="primary" @click="nextStep">下一步</el-button>
        <el-button v-if="activeStep === 4" type="success" @click="submitApply">提交申请</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useCaseStore } from '@/stores/caseStore'

const caseStore = useCaseStore()
const activeStep = ref(1)
const formData = reactive({
  caseName: '',
  caseType: '',
  applicant: '',
  phone: '',
  address: '',
  description: '',
  content: '',
  attachments: []
})
const fileList = ref([])
const baseForm = ref(null)
const detailForm = ref(null)

// 案件类型选项
const caseTypeOptions = [
  { value: 'civil', label: '民事案件' },
  { value: 'criminal', label: '刑事案件' },
  { value: 'administrative', label: '行政案件' },
  { value: 'commercial', label: '商事案件' }
]

// 案件类型映射
const caseTypeMap = {
  civil: '民事案件',
  criminal: '刑事案件',
  administrative: '行政案件',
  commercial: '商事案件'
}

// 表单验证规则
const baseRules = {
  caseName: [{ required: true, message: '请输入案件名称', trigger: 'blur' }],
  caseType: [{ required: true, message: '请选择案件类型', trigger: 'change' }],
  applicant: [{ required: true, message: '请输入申请人姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ]
}

const detailRules = {
  content: [{ required: true, message: '请输入案件内容', trigger: 'blur' }]
}

// 下一步
const nextStep = () => {
  let valid = false
  if (activeStep.value === 1) {
    // 验证基本信息表单
    baseForm.value.validate(valid => {
      if (valid) {
        activeStep.value++
      }
    })
  } else if (activeStep.value === 2) {
    // 验证案件详情表单
    detailForm.value.validate(valid => {
      if (valid) {
        activeStep.value++
      }
    })
  } else {
    activeStep.value++
  }
}

// 上一步
const prevStep = () => {
  activeStep.value--
}

// 处理上传成功
const handleUploadSuccess = (response, file, fileList) => {
  formData.attachments.push({
    name: file.name,
    url: response.data.url
  })
}

// 处理移除文件
const handleRemove = (file, fileList) => {
  formData.attachments = formData.attachments.filter(item => item.name !== file.name)
}

// 提交申请
const submitApply = async () => {
  try {
    await caseStore.createCase(formData)
    ElMessage.success('案件申请提交成功')
    // 重置表单
    resetForm()
    activeStep.value = 1
  } catch (error) {
    ElMessage.error('提交失败：' + (error.message || '服务器错误'))
  }
}

// 重置表单
const resetForm = () => {

  fileList.value = []
}
</script>

<style scoped>
.case-apply-container {
  padding: 20px;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.action-bar {
  margin-top: 20px;
  text-align: center;
}
</style>